<template>
  <common-info-dialog
    :visible="dialogShow"
    :title="dialogTitle"
    width="800px"
    @cancel="close"
  >
    <common-info-table>
      <common-info-table-cell label="上级组织">{{
        parentDept
      }}</common-info-table-cell>
      <common-info-table-cell label="组织名称" width="50%">{{
        form.deptName
      }}</common-info-table-cell>
      <common-info-table-cell label="显示排序" width="50%">{{
        form.orderNum
      }}</common-info-table-cell>
      <common-info-table-cell label="备注">{{
        form.remark
      }}</common-info-table-cell>
    </common-info-table>
  </common-info-dialog>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import BaseList from "@/mixins/BaseList";

export default {
  components: { Treeselect },
  props: {
    deptselect: {
      type: Array,
      default: () => [],
    },
  },
  mixins: [BaseList],
  data() {
    return {
      dialogTitle: "组织详情", // 标题
      dialogShow: false, // 是否显示
      deptList: [],
      form: {},
      parentDept: "",
    };
  },
  watch: {},
  computed: {},
  methods: {
    normalizer(node) {
      // 去掉children=[]的children属性
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.deptId,
        label: node.deptName,
        children: node.children,
      };
    },
    /**
     * 关闭
     */
    close() {
      this.dialogShow = false;
    },
    /**
     * 显示
     */
    show(data) {
      this.dialogShow = true;
      this.form = data.deptId ? data : this.$options.data().form;
      this.parentDept = "";
      this.getParentDept(this.deptselect);
    },

    getParentDept(data){
      data.forEach(item=>{
        if(item.deptId === this.form.parentId){
          this.parentDept = item.deptName;
        }else if(item.children && item.children.length > 0){
          this.getParentDept(item.children)
        }
      })
    }
  },
};
</script>
<style lang="scss" scoped>
</style>
